Expert HTML5 Template Documentation
Version 1.0
Introducing Expert - HTML5 Template
First of all, Thank you so much for purchasing this template and for being my loyal customer.
You are awesome!
You are entitled to get free lifetime updates to this product + exceptional support from the author directly.
This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this template. You may learn basics here, here and here.
Requirements
You will need the following sofwares to customize this template.
- Code Editing Software (eg: Dreamweaver, Sublime Text or Notepad)
- Web Browser for testing (eg: Google Chrome or Mozilla Firefox)
- FTP Tool to upload files to Server (eg: FileZilla)
Be careful while editing the template. If not edited properly, the design layout may break completely.
No support is provided for faulty customization.
Modification #back to top
Expert is a Template for all your needs and it has a lot of features, like stiky menu, Animated Sections, Responsive timeline, Skill bar, Mobile friendly portfolio lightbox, Pracing Table, Working PHP AJAX Contact form with jQuery validation and mutch more.
It has 1 One-Page:
index.html - Home Page
A screen of the Home Page:
The site is made of many sections like header, Banner, Timeline, testimonials, services and more...
As example we have the Sticky Menu and Banner section, the code below:
Note: You can change easily animation effect, animation duration, animation delay. Please flow the line no 38. this animation depend (animate css and wow js). If you use animation effect another section just add (wow and animate css class e.x- zoomIn) Animate css class here
And this is how it look live:
And a 3 column about section, if you want to change anything here its easy to modify it:
Who am I ?
Web Desinger / Developer at Creative Indivdual industry Information Technology and Services
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
Personal Details
- Birthdate : 09/04/1988
- Phone : + 123-456-789-456
- Email : themepail@gmail.com
- Web : http://themepail.com
- Skype : Adriana-Rodriguez
- Freelance : Available
- Adresse : The Maltstore Level 3, 551 Swanston Street
And this is how it look live:
And a Timeline section, if you want to change anything here its easy to modify it:
Education
Master Degree of Web Design
Oxford University
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
12 April 2012 - 28 June 2013
10 June 2008 - 12 April 2012
Software Engineering
National University
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
Higher Secondary School Certificate
State Funded Schools
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
12 April 2006 - 10 June 2008
12 April 2004 - 10 June 2006
Secondary School Certificate
State Funded Schools
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
And this is how it look live:
The same thing is with all sections, My Skills, Experience, Portfolio, Statistics Section, Service, Interest, etc.. they are all in a section.
Modify your email here to recive emails from contact.php file:
CSS file Structure #back to top
CSS file is very good structured and arranged so you can search very easy:
/*----------------------
3. Banner Section
------------------------*/
.banner-section {
background-image: url("images/banner/top-banner.jpg");
background-repeat: no-repeat;
background-attachment: scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.banner-overlay{
min-height: 660px;
text-align: center;
color:#fff;
text-transform: uppercase;
position: relative;
background: #4F8511;
background: -webkit-linear-gradient(left top, rgba(110,169,41,0.9) 30%, rgba(109,32,122,0.9) 100%);
background: -o-linear-gradient(bottom right, rgba(110,169,41,0.9) 30%, rgba(109,32,122,0.9) 100%);
background: -moz-linear-gradient(bottom right, rgba(110,169,41,0.9) 30%, rgba(109,32,122,0.9) 100%);
background: linear-gradient(to bottom right, rgba(110,169,41,0.9) 30%, rgba(109,32,122,0.9) 100%);
}
.banner-content{
position: absolute;
left: 20px;
right: 20px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
margin-top: 40px;
}
.banner-section h1 {
font-weight: 700;
color:#fff;
}
.banner-sub-title {
letter-spacing: 5px;
font-weight: 400;
font-size: 20px;
margin-bottom: 30px;
}
/*End Banner Section*/
JS file Structure #back to top
JS file is very good structured and arranged so you can search very easy:
/*============================
private member
============================*/
// ajaxified common message handler
var _commonMsgHandler = function(form, isSuccess, msg){
var msgClasses;
if (isSuccess){
msgClasses = "h3 text-center tada animated text-success";
} else {
msgClasses = "h3 text-center text-danger";
$(form).removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass();
});
}
$(form).find("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
}
// HTML form validator and handler
var _formHandler = function(form){
if ($().validator) {
form.validator().on("submit", function (event) {
if (event.isDefaultPrevented()) {
// handle the invalid form...
_commonMsgHandler(form, false, "Please check again if all fields are filled out correctly");
} else {
event.preventDefault();
var url = $(form).attr('action');
$.ajax({
type: "POST",
url: url,
data: $(form).serializeArray(),
success: function (text) {
if (text == "success"){
$(form)[0].reset();
_commonMsgHandler(form, true, "Contact form successfully submitted. Thank you, I will get back to you soon!");
} else {
_commonMsgHandler(form, false, "Please check again if all fields are filled out correctly");
}
}
});
}
});
}
};
// Dom elements even binding
var _actionHandler = function(){
/*=========================
main menu
==============================*/
//jquery sticky menu on scroll
$(window).on('scroll', function () {
if ($(window).scrollTop() > 0.5) {
$('#sticker').addClass('stick');
} else {
$('#sticker').removeClass('stick');
}
});
// jQuery page scrolling feature - requires jQuery Easing plugin
$('nav a, .banner-content a, .price-inner a').unbind('click').on('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top -50
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
// jQuery navbar dropdown item on click to collapse (small device)
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') ) {
$(this).collapse('hide');
}
});
// end main menu
/*=========================
jQuery isotope (Filtter portfolio on click)
==============================*/
$('.filter-btn li').unbind('click').on('click', function(){
$('.filter-btn .current').removeClass('current');
$(this).addClass('current');
handleIsotop($('.portfolio-gallery'), {
filter: $(this).data('filter'),
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
});
};
Support Desk #back to top
Please remember you have purchased a very affordable theme and you have not paid for a full-time web design agency. Occasionally we will help with small tweaks, but these requests will be put on a lower priority due to their nature. Support is also 100% optional and we provide it for your connivence, so please be patient, polite and respectful.
Please visit our profile page or ask question @themepail
Support for my items includes:- * Responding to questions or problems regarding the item and its features
- * Fixing bugs and reported issues
- * Providing updates to ensure compatibility with new software versions
- * Customization and installation services
- * Support for third party software and plug-ins
- * Make sure your question is a valid Theme Issue and not a customization request.
- * Make sure you have read through the documentation and any related video guides before asking support on how to accomplish a task.
- * Make sure to double check the theme FAQs.
- * Try disabling any active plugins to make sure there isn't a conflict with a plugin. And if there is this way you can let us know.
- * If you have customized your theme and now have an issue, back-track to make sure you didn't make a mistake. If you have made changes and can't find the issue, please provide us with your changelog.
- * Almost 80% of the time we find that the solution to people's issues can be solved with a simple "Google Search". You might want to try that before seeking support. You might be able to fix the issue yourself much quicker than we can respond to your request.
- * Make sure to state the name of the theme you are having issues with when requesting support via ThemeForest.
Files & Sources #back to top
These are the primary CSS files used for general front-end styling. Use these to customize your theme even further. All included CSS codes under expert/, expert/css/, expert/libraries/
- 1. style.css - Primary stylesheet
- 2. bootstrap.css - Bootstrap stylesheet
- 3. owl-carousel.css - OWL Carousel css
- 4. owl.theme.css - OWL Carousel theme css
- 5. fontawesome.css - FontAwesome Font Icons stylesheet
- 6. simple-line-icons.css - Line icons css file
- 7. lightbox.min.css - Lightbox effect css file
- 8. responsive.css - Media Responsive css file
- 9. animate.css - CSS3 animations css file
These are the various attribution inks to the Javascript files included or modified to work with in this theme. All included JavaScript codes under expert/js/, expert/libraries/
- 1. jquery.min.js - Base JavaScript
- 2. bootstrap.js - Bootstrap JavaScript
- 3. owl.carousel.min.js - Owl carousel JavaScript
- 4. isotope.pkgd.min.js - Masonry Portfolio JavaScript
- 5. jquery.waypoints.min.js - Scroll to an element JavaScript
- 6. jquery.counterup.min.js - Count Down JavaScript
- 7. wow.min.js - CSS3 animation JavaScript
- 8. jquery.scrollUp.min.js - scrollUp JavaScript
- 9. lightbox.min.js - Lightbox JavaScript
- 10. form-validator.min.js - Contact form validate JavaScript
- 11. jquery.easing.min.js - Easing JavaScript
- 12. script.js - custom and all JavaScript init
Google Web Fonts : - Lato, Raleway, Open+Sans
Thank you so much for choosing "expert" we hope you will enjoy using it!